<template>
  <div class="example-echarts">
  </div>
</template>

<script>
export default {
  mounted() {
    const style = {
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#fff'
        }
      }
    }
    const echarts = this.$ecs.init(document.querySelector('.example-echarts'))
    const option = {
      color: ['#aa00ff', '#55aaff', '#ffaa00'],
      legend: {
        textStyle: {
          color: '#fff'
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        show: true,
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
        ...style,
        boundryGap: true
      },
      yAxis: {
        show: true,
        type: 'value',
        ...style
      },
      grad: {
        top: '3%',
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
          name: '销量1',
          type: 'bar',
          stack: '商品',
          barWidth: '40%',
          data: [100, 89, 150, 57, 94, 67, 110],
          label: {
            show: true
          }
        },
        {
          name: '销量2',
          type: 'bar',
          stack: '商品',
          barWidth: '40%',
          data: [60, 39, 50, 37, 64, 27, 10],
          label: {
            show: true
          }
        },
        {
          name: '营收1',
          type: 'line',
          stack: '商品',
          data: [60, 39, 50, 37, 64, 27, 10],
          label: {
            show: true
          }
        }
      ]
    }
    echarts.setOption(option)
  }
}
</script>

<style scoped>
  .example-echarts {
    height: 300px;
    width: 600px;
  }
</style>
